import React, { PureComponent, memo, useCallback } from 'react'
import { func } from 'prop-types'
import { formatCount } from 'utils/index'
const LiveInfo = memo(function LiveInfo(props) {
    const { data, picURL, history } = props
    const cover = data.cover.includes(picURL) ? data.cover : `${picURL}?pic=${data.cover}`
    const jump = useCallback((id) => {
        window.location.href = `/live/${id}`
    })
    return (
        <div
            className="liveitem"
            onClick={() => {
                jump(data.roomId)
            }}
        >
            <div className="cover">
                <img className="info-pic" src={cover} alt={data.title} />
                <div className="info flex middle between">
                    <div>
                        <span className="cover-icon ml5 mr5 icon-play-count" />
                        <span className="count">{formatCount(data.playCount)}</span>
                    </div>
                    <div>
                        <span className="cover-icon ml5 mr5 icon-barrage-count" />
                        <span className="count">{formatCount(data.barrageCount)}</span>
                    </div>
                </div>
            </div>
            <div className="title row2">{data.title}</div>
        </div>
    )
})
export default LiveInfo
